<template>
  <div :class="['dra', 'drawerTemplate']">
    <Drawer
      :class="[`${language === 'en' ? 'drawerTemplate-en' : ''}`]"
      ref="drawer"
      :title="title"
      :auto-focus="false"
      :size="'large'"
      v-bind="$attrs"
      :show-footer="true"
      :showConfirm="false"
      :negativeText="$t('common.button.close')"
      :on-after-leave="afterLeaveFn"
      :width="language === 'en' ? '1840px' : ''"
    >
      <template
        v-if="
          optionsData &&
          optionsData.type === 'unit' &&
          optionsData.list &&
          optionsData.list.length
        "
        #header
      >
        <div class="drawer-header">
          <div class="content">
            <div
              v-for="(item, key) in optionsData.list"
              :class="[
                'label',
                `drawer-header-${item.id}`,
                `${activeId === item.id ? 'activeClass' : ''}`
              ]"
              :key="key"
              @click="scrollToActiveIdFn(item.id)"
            >
              {{ getLabelFn(item) }}
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="footer">
          <n-space>
            <DrawerTemplateInput
              v-if="footerInputData"
              :data="footerInputData"
            />
            <n-button
              v-if="optionsData.nextDrawerType"
              type="primary"
              @click="btnNextDrawerTypeClickFn(optionsData.nextDrawerType)"
            >
              {{ getPageLangValueFn('btn.nextStep','productionCenter') }}
            </n-button>
            <n-button
              v-if="optionsData.preDrawerType"
              type="primary"
              @click="btnNextDrawerTypeClickFn(optionsData.preDrawerType)"
            >
              {{ getPageLangValueFn('btn.preStep','productionCenter') }}
            </n-button>
            <!-- <n-button
              v-if="isShowSaveBtn && (optionsData.saveParameters && optionsData.saveParametersTab === undefined || (optionsData.saveParameters && optionsData.saveParametersTab !== undefined && optionsData.saveParametersTab === saveParametersTab))"
              type="primary"
              :loading="loading"
              @click="btnClickFn()"
            >
              {{ getPageLangValueFn('btn.saveParameters','productionCenter') }}
            </n-button> -->
            <n-button @click="closeFn">
              {{ $t('common.button.close') }}
            </n-button>
          </n-space>
        </div>
      </template>

      <DrawerTemplateContent
        v-if="optionsData"
        ref="drawerTemplateContentRef"
        @scrollToActiveIdFn="scrollToActiveIdFn"
        @updateSaveParametersTabFn="updateSaveParametersTabFn"
      />
    </Drawer>
  </div>
</template>

<script lang="ts" setup name="DrawerTemplate">
import { Drawer } from '@/components/DpDrawer';

import { useMixins } from '@/hooks/useMixins';

import DrawerTemplateContent from './DrawerTemplateContent.vue';

import DrawerTemplateInput from './DrawerTemplateInput.vue';

const drawerTemplateContentRef: any = ref(null);

// const emit = defineEmits(['openDrawerFn']);

const openDrawerFn:any = inject('openDrawerFn',null);

const { language, getPageLangValueFn,
  // routerPage
} = useMixins();

// const isShowSaveBtn = routerPage.value !== "offline"

const drawer: any = ref(null);

const optionsData: any = ref(null);

const title: any = ref(null);

const activeId: any = ref(null);

const footerInputData: any = ref(null);

// const loading: any = ref(false);

const saveParametersTab: any = ref(null);

const nextDrawerType = ref(null);

const updateSaveParametersTabFn = (val) => {
  if (val) {
    saveParametersTab.value = val;
  }
}

const closeFn = async (fn: any = null) => {
  if (
    drawerTemplateContentRef &&
    drawerTemplateContentRef.value &&
    drawerTemplateContentRef.value.removeListenerFn
  ) {
    await drawerTemplateContentRef.value.removeListenerFn();
  }

  nextTick(() => {
    if (drawer && drawer.value) {
      drawer.value.close();

      nextTick(()=>{
        if (typeof fn === 'function') {
          fn();
        }
      })
    }
  });
};

const open = (data: any, id = null, scrollId = null) => {
  const { labelZh = null, labelEn = null,labelRu=null, footer = null } = data;

  if (labelZh || labelEn) {
    title.value =
      language.value === 'zh' ? labelZh || labelEn || labelRu : language.value === 'ru' ? labelRu || labelEn ||  labelZh:labelEn || labelZh || labelRu;
  } else {
    title.value = null;
  }

  if (footer) {
    footerInputData.value = footer;
  } else {
    footerInputData.value = null;
  }

  optionsData.value = data;

  nextTick(() => {
    if (drawer && drawer.value) {
      drawer.value.open();

      nextTick(() => {
        if (
          drawerTemplateContentRef &&
          drawerTemplateContentRef.value &&
          drawerTemplateContentRef.value.initFn
        ) {
          drawerTemplateContentRef.value.initFn(data, id, scrollId);
        }
      });
    }
  });
};

const getLabelFn = item => {
  if (item) {
    const { labelZh = null, labelEn = null,labelRu=null } = item;

    if (labelZh || labelEn || labelRu) {
      return language.value === 'zh' ? labelZh || labelEn || labelRu : language.value === 'ru' ? labelRu || labelZh || labelEn : labelEn || labelZh || labelRu;
    }
  }
  return '-';
};

const scrollToActiveIdFn = (id, scrollId = null) => {
  if (id) {
    nextTick(() => {
      const idView: any = document.querySelector(`#${scrollId || id}`);

      if (idView) {
        const contian: any = document.querySelector(
          '.n-drawer-body-content-wrapper'
        );

        contian.scroll({
          top: idView.offsetTop - 100,
          behavior: 'auto'
        });

        setTimeout(() => {
          nextTick(() => {
            activeId.value = id;
          });
        }, 0);
      }
    });
  }
};

// const drawerTemplateBtnSaveDFParameterFn:any = inject('drawerTemplateBtnSaveDFParameterFn',null);

// const factoryName = inject('factoryName',null);

// const btnClickFn = async () => {
//   if (factoryName === 'dongfang') {
//     if (drawerTemplateBtnSaveDFParameterFn) {
//       loading.value = true;

//       drawerTemplateBtnSaveDFParameterFn(() => {
//         loading.value = false
//       });
//     }

//     return;
//   }

//   if (
//     drawerTemplateContentRef &&
//     drawerTemplateContentRef.value &&
//     drawerTemplateContentRef.value.btnClickFn
//   ) {
//     loading.value = true;

//     await drawerTemplateContentRef.value.btnClickFn(() => {
//       loading.value = false
//     });
//   }
// };

const btnNextDrawerTypeClickFn = type => {
  nextDrawerType.value = type;

  closeFn();
};

const afterLeaveFn = async () => {
  if (
    drawerTemplateContentRef &&
    drawerTemplateContentRef.value &&
    drawerTemplateContentRef.value.deleteAddReadListFn
  ) {
    await drawerTemplateContentRef.value.deleteAddReadListFn();

    nextTick(() => {
      optionsData.value = null;

      if(nextDrawerType && nextDrawerType.value){
        openDrawerFn && openDrawerFn(nextDrawerType.value);

        nextDrawerType.value = null;
      }
    })


  }
};

// const refList: any = [];

// const setRefFn = (el: any, name: any) => {
//   if (el) {
//     const obj = {
//       name,
//       el
//     };

//     const isAdd = refList.every((item, key) => {
//       if (item.name === name) {
//         refList[key] = obj;

//         return false;
//       }

//       return true;
//     });

//     if (isAdd) {
//       refList.push(obj);
//     }
//   }

// };

defineExpose({ open });
</script>
<style lang="less" scoped>
.drawerTemplate-tabs {
  margin: 16px 0;
  color: #222222;

  :deep(.n-tabs-rail) {
    width: auto;
    margin: 0 auto;
    height: 52px;
    border-radius: 4px;

    .n-tabs-tab-wrapper .n-tabs-tab {
      padding: 12px 36px;
      margin: 4px 6px;
      border-radius: 4px;
      font-size: 20px;
      transition: 0.3s all;
      line-height: normal;

      &.n-tabs-tab--active {
        background-color: #307AFA;
        color: #fff;
        transition: 0.3s all;
      }
    }
  }

  .drawerTemplate-tabs-card {
    margin: 12px 0;

    :deep(.n-tab-pane) {
      padding: 0;
    }

    :deep(.n-tabs-nav--card-type) {
      padding: 0 20px;

      .n-tabs-tab-pad {
        width: 12px;
        border-color: #cecece;
      }

      .n-tabs-tab {
        padding: 14px 40px;
        font-size: 18px;
        line-height: normal;
        background-color: #fff;
        border-color: #cecece;
        transition: 0.3s all;

        &.n-tabs-tab--active {
          background-color: #fff3f0;
          border-color: #307AFA;
          color: #307AFA;
          transition: 0.3s all;
        }
      }

      .n-tabs-pad {
        border-color: #cecece;
      }
    }
  }

  :deep(.drawerTemplateData) {
    // padding: 0;
    .n-button--primary-type {
      min-width: 100px !important;
    }
  }

  :deep(.drawerTemplateData-view-btn) {
    padding: 0 20px;

    .drawerTemplateInput {
      justify-content: start;
      border-bottom: none;

      .n-button--primary-type {
        min-width: 136px !important;
        height: 48px;
        width: auto;
      }
    }
  }

  :deep(.drawerTemplateData-view-item) {
    width: 100%;
  }
}

.footer {
  :deep(.n-button--default-type) {
    min-width: 136px !important;
    height: 48px;
    font-size: 20px;
  }

  // :deep(.n-button.n-button--primary-type) {
  //   --n-border: none !important;
  //   --n-border-hover: none !important;
  //   --n-border-focus: none !important;
  //   --n-border-pressed: none !important;
  //   --n-border-disabled: none !important;
  //   --n-color-pressed: none !important;
  //   --n-color-focus: none !important;
  //   --n-color-hover: none !important;
  // }

  :deep(.n-button--primary-type) {
    min-width: 136px !important;
    height: 48px;
    // background: linear-gradient(
    //   146deg,
    //   #aaabab 5%,
    //   #aaabab 15%,
    //   #e5e5e5 35%,
    //   #ffffff 55%,
    //   #e5e5e5 70%,
    //   #aaabab 90%,
    //   #aaabab 100%,
    //   lime 100px
    // );
    border-radius: 0px !important;
    // color: #4d4d4d;
    // border: 0px solid #d9d9d9;
    // border:0 !important;
    // border-image-source: linear-gradient(45deg, #5d5d5d, #aaabab);
    // border-image-slice: 1;
    // clip-path: inset(0 round 3px);
    // border: 1px solid #5d5d5d;
    font-size: 20px;
  }

  // :deep(.n-button.n-button--default-type:hover) {
  //   transition: none;
  //   border: 1px solid #d4d6d9;
  //   background-color: #d4d6d9;
  //   --n-border-hover: 1px solid #d4d6d9 !important;
  //   --n-border-pressed: 1px solid #d4d6d9 !important;
  //   --n-border-focus: 1px solid #d4d6d9 !important;
  //   color: #4d5372;
  // }
}

// :deep(.n-button:not(.n-button--disabled):hover) {
//   color: #4d4d4d;
// }

// :deep(.n-button:not(.n-button--disabled):focus) {
//   color: #4d4d4d;
// }

.drawer-header {
  .content {
    display: flex;
    // width: 668px;
    height: 52px;
    background: #f0f0f0;
    border-radius: 4px;
    padding: 4px 12px;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    color: #222222;

    .label {
      width: 152px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .after {
      height: 20px;
      width: 1px;
      border-left: 1px solid #e6e8eb;
    }

    .activeClass {
      width: 152px;
      height: 44px;
      color: #fff;
      background: #307AFA;
      box-shadow: 0px 5px 5px 0px rgba(255, 106, 63, 0.1);
      border-radius: 4px;
    }
  }
}
</style>

<style lang="less">
.drawerTemplate-en {
  .drawerTemplatePrice{
    .drawerTemplateData-view-item-text{
      font-size: 16px;
    }
  }
  .drawerTemplateData-view-print-list
    .drawerTemplateData-view-print-list-title {
      width: 90px!important;
      font-size: 14px !important;
      padding: 10px!important;
    }
  .drawerTemplateData .drawerTemplateData-view-item .drawerTemplateData-view-item-label,.n-button--primary-type,.n-button--default-type{
    font-size: 14px !important;
  }
  .drawerTemplateData .drawerTemplateData-view-item-input-write-text{
    font-size: 14px;
  }
  .drawerTemplateData .drawerTemplateData-view-item .drawerTemplateData-view-item-label{
    width: 210px;
  }
  .drawerTemplateData .drawerTemplateData-view-title,.drawer-header .content{
    font-size: 16px;
  }
  .drawerTemplatePrice.drawerTemplatePrice-print .drawerTemplateData-view-item:nth-of-type(1) .drawerTemplateData-view-item-w120:nth-of-type(1){
    width: 320px;
  }

  .drawerTemplatePrice.drawerTemplatePrice-print .drawerTemplateData-view-item:nth-of-type(2) .drawerTemplateData-view-item-w120:nth-of-type(1){
    width: 260px;
  }

  .drawerTemplatePrice.drawerTemplatePrice-print .drawerTemplateData-view-item-text-reality,.drawerTemplatePrice.drawerTemplatePrice-print .drawerTemplateData-view-item-text-setup{
    width: 120px;
  }

  .drawerTemplateData .drawerTemplateData-view-item .drawerTemplateData-view-item-w120{
    width: 210px;
  }

  .drawerTemplateData-view.drawerTemplateData-view-block .drawerTemplateData-view-item-w120:nth-of-type(1){
    width: 873px;
  }

  .n-tabs-rail .n-tabs-tab-wrapper .n-tabs-tab{
    font-size: 16px!important;
  }

  .drawerTemplatePrice .drawerTemplatePrice-content-list{
    .drawerTemplateData-view-item-w130{
      width: 210px;
    }

    .drawerTemplateData-view-item-text{
      font-size: 16px;
      word-wrap: no-wrap;
      &:last-child{
        width: auto;
        min-width: 100px;
      }
    }
  }

  .drawerTemplateInput {
    .flex{
      .drawerTemplateData-view-item-label{
        min-width: 120px;
      }
    }
  }

  .drawerTemplate-tabs .n-tabs-rail .n-tabs-tab-wrapper .n-tabs-tab{
    font-size: 16px;
  }
}
</style>
